<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: Teemor
 * @Date: 2024-03-15 10:40:28
-->
<template>
  <view class="chartsBox">
    <view class="title textColor2"
      ><view class="textColor flex flex-items-center font-size-[30rpx] fw-bold"
        ><view class="line" :style="{ background: themeColor }"></view> {{ title }}</view
      >
      2024/04/08 14:00:30</view
    >
    <view class="charts" id="charts"  height: 400rpx></view>
  </view>
</template>

<script setup>
import * as echarts from 'echarts'
import { useThemeStore } from '@/store'
const themeConfig = useThemeStore()
const { themeColor } = themeConfig.themeConfig
const props = defineProps({
  title: {
    type: String,
    default: '功率曲线',
  },
})
const { title } = toRefs(props)
onMounted(() => {
  // const myChart = echarts.init(document.getElementById('charts'))
  // myChart.setOption({
  //   title: {
  //       text: '折线图示例'
  //     },
  //     xAxis: {
  //       type: 'category', // x轴类型为类目轴
  //       boundaryGap: false, // 取消x轴两端空白
  //       data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] // x轴类目数据
  //     },
  //     series: [{
  //       type: 'line', // 图表类型为折线图
  //       data: [120, 180, 150, 80, 70, 110, 130] // 折线图数据
  //     }]
  //     ,
  // })
})
</script>

<style lang="scss" scoped>
.chartsBox {
  .title {
    display: flex;
    justify-content: space-between;

    .line {
      width: 8rpx;
      height: 28rpx;
      margin-right: 18rpx;
      border-radius: 4rpx;
    }
  }

  .charts{
    height: 400px;
  }
}
</style>
